<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{value}} <br />

      <!-- v-model默认本质上的事件是input事件,但是如果我们希望是change事件,就需要使用lazy修饰符 -->
      <input type="text" v-model.lazy="value" /> <br />

      <!-- v-model的.number修饰符,收集表单数据的时候,转数字(和parseInt类型,如果无法转数字则直接放弃) -->
      {{count}}
      <input type="text" v-model.number="count" /><br />

      <!-- v-model的.trim修饰符,收集的时候去掉前后空白字符 -->
      {{message}}
      <input type="text" v-model="message" />
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            value: "hello",
            count: 0,
            message: "",
          };
        },
      });
    </script>
  </body>
</html>
